<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unitree Nav2 Web Control</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">
  <link href="/static/css/style.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <!-- 侧边栏控制面板 -->
      <div class="col-md-3 col-lg-2 sidebar">
        <h2 class="text-center my-3">Unitree Control</h2>

        <!-- 机器人状态卡片 -->
        <div class="card mb-3">
          <div class="card-header">
            <i class="bi bi-robot"></i> Robot Status
          </div>
          <div class="card-body">
            <div id="robot-status">
              <div><strong>Position:</strong> <span id="robot-position">-</span></div>
              <div><strong>Orientation:</strong> <span id="robot-orientation">-</span></div>
              <div><strong>Velocity:</strong> <span id="robot-velocity">-</span></div>
            </div>
            <div class="d-grid gap-2 mt-3">
              <button id="localize-btn" class="btn btn-primary">
                <i class="bi bi-geo-alt"></i> Localize
              </button>
            </div>
          </div>
        </div>

        <!-- 速度控制卡片 -->
        <div class="card mb-3">
          <div class="card-header">
            <i class="bi bi-speedometer2"></i> Velocity Control
          </div>
          <div class="card-body">
            <div class="mb-3">
              <label class="form-label">Linear (m/s)</label>
              <input type="range" id="velocity-slider" class="form-range" min="-0.5" max="1.0" step="0.05" value="0">
            </div>
            <div class="mb-3">
              <label class="form-label">Angular (rad/s)</label>
              <input type="range" id="angular-slider" class="form-range" min="-1.57" max="1.57" step="0.1" value="0">
            </div>
            <div class="d-grid gap-2">
              <button id="emergency-stop" class="btn btn-danger">
                <i class="bi bi-exclamation-octagon"></i> Emergency Stop
              </button>
            </div>
          </div>
        </div>

        <!-- 导航控制卡片 -->
        <div class="card mb-3">
          <div class="card-header">
            <i class="bi bi-signpost"></i> Navigation
          </div>
          <div class="card-body">
            <div class="mb-3">
              <label class="form-label">Navigation Mode</label>
              <select id="navigation-mode" class="form-select">
                <option value="default">Default</option>
                <option value="precise">Precise</option>
                <option value="fast">Fast</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">Goal Position</label>
              <div class="input-group mb-2">
                <span class="input-group-text">X</span>
                <input type="number" id="goal-x" class="form-control" step="0.1">
              </div>
              <div class="input-group mb-2">
                <span class="input-group-text">Y</span>
                <input type="number" id="goal-y" class="form-control" step="0.1">
              </div>
              <div class="input-group mb-2">
                <span class="input-group-text">θ</span>
                <input type="number" id="goal-theta" class="form-control" step="0.1">
              </div>
              <div class="d-grid gap-2">
                <button id="navigate-btn" class="btn btn-success">
                  <i class="bi bi-send"></i> Navigate To
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 航点控制卡片 -->
        <div class="card">
          <div class="card-header">
            <i class="bi bi-pin-map"></i> Waypoints
          </div>
          <div class="card-body">
            <div id="waypoints-list" class="mb-3"></div>
            <div class="d-grid gap-2">
              <button id="clear-waypoints-btn" class="btn btn-warning">
                <i class="bi bi-trash"></i> Clear Waypoints
              </button>
              <button id="execute-waypoints-btn" class="btn btn-danger">
                <i class="bi bi-play"></i> Execute Waypoints
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 主地图区域 -->
      <div class="col-md-9 col-lg-10 p-0">
        <div class="map-container">
          <canvas id="nav-canvas"></canvas>

          <!-- 地图工具栏 -->
          <div class="toolbar">
            <div class="btn-group-vertical">
              <button id="tool-select" class="tool-btn active" title="Select Tool">
                <i class="bi bi-cursor"></i>
              </button>
              <button id="tool-waypoint" class="tool-btn" title="Waypoint Tool">
                <i class="bi bi-pin"></i>
              </button>
              <button id="tool-measure" class="tool-btn" title="Measure Tool">
                <i class="bi bi-rulers"></i>
              </button>
              <div class="dropdown-divider"></div>
              <button id="zoom-in" class="tool-btn" title="Zoom In">
                <i class="bi bi-zoom-in"></i>
              </button>
              <button id="zoom-out" class="tool-btn" title="Zoom Out">
                <i class="bi bi-zoom-out"></i>
              </button>
              <button id="center-map" class="tool-btn" title="Center Map">
                <i class="bi bi-fullscreen"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 初始位置设置模态框 -->
  <div class="modal fade" id="initialPoseModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Set Initial Pose</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">X Position (meters)</label>
            <input type="number" id="initial-pose-x" class="form-control" step="0.01">
          </div>
          <div class="mb-3">
            <label class="form-label">Y Position (meters)</label>
            <input type="number" id="initial-pose-y" class="form-control" step="0.01">
          </div>
          <div class="mb-3">
            <label class="form-label">Orientation (radians)</label>
            <input type="number" id="initial-pose-theta" class="form-control" step="0.01">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button id="confirm-initial-pose" type="button" class="btn btn-primary">Confirm</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 状态栏 -->
  <div class="status-bar">
    <div>
      <span class="status-indicator" id="connection-status">Disconnected</span>
      <span class="status-indicator" id="navigation-status">Idle</span>
    </div>
    <div>
      <span><i class="bi bi-battery-half"></i> <span id="battery-level">-</span>%</span>
      <span class="ms-3"><i class="bi bi-cpu"></i> <span id="cpu-usage">-</span>%</span>
      <span class="ms-3"><i class="bi bi-memory"></i> <span id="memory-usage">-</span>%</span>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
  <script src="/static/js/nav2d.js"></script>
  <script src="/static/js/control-panel.js"></script>
  <script src="/static/js/keyboard-controller.js"></script>
  <script src="/static/js/status-monitor.js"></script>
  <script src="/static/js/map-tools.js"></script>
  <script src="/static/js/main.js"></script>
</body>

</html>